<template>
<section id="company-verification" class="panel card">
    <header class="panel__header">
      <h3>企业认证资料</h3>
      <p>
        提交企业营业执照等资料，审核通过后可查看报价、下单及进入结算流程。信息会同步至财务与通知模块，确保资料齐全。
      </p>
    </header>

    <el-alert
      v-if="statusTips"
      :title="statusTips.title"
      :type="statusTips.type"
      :description="statusTips.description"
      :closable="false"
      class="panel__alert"
    />

    <form class="panel__form" @submit.prevent="handleSubmit">
      <div class="panel__grid">
        <label class="panel__field">
          <span>企业名称</span>
          <input v-model.trim="form.company_name" type="text" required placeholder="请输入营业执照上的企业全称" />
        </label>
        <label class="panel__field">
          <span>统一社会信用代码</span>
          <input v-model.trim="form.license_code" type="text" required placeholder="请输入 18 位统一社会信用代码" />
        </label>
        <label class="panel__field">
          <span>法人代表</span>
          <input v-model.trim="form.legal_rep" type="text" placeholder="请输入法人姓名" />
        </label>
        <label class="panel__field">
          <span>所在区域 ID（可选）</span>
          <input v-model.number="form.region_id" type="number" min="1" placeholder="可在运营后台获取" />
        </label>
      </div>

      <label class="panel__field">
        <span>注册地址</span>
        <input v-model.trim="form.address" type="text" placeholder="请输入注册地址" />
      </label>

      <label class="panel__field">
        <span>经营范围（可选）</span>
        <textarea v-model.trim="form.scope" rows="3" placeholder="可粘贴营业执照上的经营范围"></textarea>
      </label>

      <label class="panel__field">
        <span>营业执照图片 URL（可选）</span>
        <input v-model.trim="form.license_photo" type="url" placeholder="请先上传至对象存储后粘贴访问地址" />
      </label>

      <div class="panel__actions">
        <button type="submit" class="btn btn--primary" :disabled="submitting">
          {{ submitting ? "提交中..." : "提交认证资料" }}
        </button>
        <button type="button" class="btn btn--ghost" @click="loadCompany" :disabled="loading">
          重新获取
        </button>
      </div>
    </form>
  </section>
</template>

<script setup>
import { computed, onMounted, reactive, ref } from "vue";
import { getCompanyVerification, saveCompanyVerification } from "../../api/auth";
import { message } from "../../utils/message";

const emit = defineEmits(["submitted"]);

const form = reactive({
  company_name: "",
  license_code: "",
  legal_rep: "",
  address: "",
  scope: "",
  region_id: undefined,
  license_photo: ""
});

const status = ref(null);
const loading = ref(false);
const submitting = ref(false);

const statusTips = computed(() => {
  switch (status.value) {
    case 1:
      return {
        type: "success",
        title: "审核通过",
        description: "企业认证已通过，可直接在平台下单、查看协议价。"
      };
    case 2:
      return {
        type: "error",
        title: "审核被驳回",
        description: "请根据运营反馈修改资料后重新提交。"
      };
    case 0:
      return {
        type: "info",
        title: "待审核",
        description: "资料已提交，运营审核通过后将通知您。"
      };
    default:
      return null;
  }
});

const normalizeForm = data => {
  form.company_name = data?.company_name || "";
  form.license_code = data?.license_code || "";
  form.legal_rep = data?.legal_rep || "";
  form.address = data?.address || "";
  form.scope = data?.scope || "";
  form.region_id = data?.region_id || undefined;
  form.license_photo = data?.license_photo || "";
};

const loadCompany = async () => {
  loading.value = true;
  try {
    const response = await getCompanyVerification();
    const body = response?.data ?? {};
    const data = body?.data ?? {};
    normalizeForm(data.company || {});
    status.value = data.company?.status ?? null;
  } catch (error) {
    message.error(error.message || "获取企业信息失败");
  } finally {
    loading.value = false;
  }
};

const handleSubmit = async () => {
  if (!form.company_name || !form.license_code) {
    message.warning("请完善企业名称与信用代码");
    return;
  }
  submitting.value = true;
  try {
    const payload = {
      company_name: form.company_name,
      license_code: form.license_code,
      legal_rep: form.legal_rep,
      address: form.address,
      scope: form.scope,
      region_id: form.region_id || undefined,
      license_photo: form.license_photo || undefined
    };
    const response = await saveCompanyVerification(payload);
    const body = response?.data ?? {};
    const data = body?.data ?? {};
    normalizeForm(data.company || {});
    status.value = data.company?.status ?? null;
    message.success(body?.msg || "资料已提交，请等待审核");
    emit("submitted", data.company);
  } catch (error) {
    message.error(error.message || "提交失败，请检查填写内容");
  } finally {
    submitting.value = false;
  }
};

onMounted(() => {
  loadCompany();
});
</script>

<style scoped lang="scss">
.panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 28px;
}

.panel__header {
  display: flex;
  flex-direction: column;
  gap: 8px;

  h3 {
    margin: 0;
  }

  p {
    margin: 0;
    color: var(--gray-600);
  }
}

.panel__alert {
  border-radius: 12px;
}

.panel__form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.panel__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.panel__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: var(--gray-600);

  input,
  textarea {
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    resize: vertical;

    &:focus {
      border-color: var(--primary-color);
      outline: none;
      box-shadow: 0 0 0 3px rgba(0, 82, 217, 0.16);
    }
  }
}

.panel__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn {
  border-radius: 10px;
  border: none;
  padding: 10px 20px;
  font-weight: 600;
  cursor: pointer;

  &--primary {
    background: var(--primary-color);
    color: #fff;
  }

  &--ghost {
    background: var(--gray-100);
    color: var(--primary-color);
  }
}
</style>
